<template>
    <div>
        <div style="text-align: right; margin-bottom: 20px;">
            <span style="margin-right: 10px;">
                <el-select v-model="templateValue" clearable placeholder="请选择">
                    <el-option v-for="item in templateOptions" :key="item.id" :label="item.templateName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="handleUpdate">更新/保存模板</el-button>
            <el-button type="danger" @click="clickDelete" :disabled="!templateValue">删除该模板</el-button>
        </div>
        <div>
            <el-form :model="formData" :rules="rules" ref="formData" label-width="160px" class="demo-formData">
                <el-row :gutter="80">
                    <el-col :span="12">
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="formData.price" placeholder="请输入默认价格"
                                style="width: calc(100% - 40px);"></el-input>
                            <el-button type="text" style="margin-left: 10px;">说明</el-button>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="库存" prop="quantity">
                            <el-input v-model="formData.quantity" placeholder="请输入默认库存"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品编码" prop="outerId">
                            <el-input v-model="formData.outerId" placeholder="请输入默认商品编码"
                                style="width: calc(100% - 40px);"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生产企业" prop="enterprise">
                            <el-input v-model="formData.enterprise" placeholder="请输入生产企业"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上架方式" prop="shelfProcessing">
                            <el-radio-group v-model="formData.shelfProcessing">
                                <el-radio label="0">直接上架</el-radio>
                                <el-radio label="1">放入仓库</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="库存计数" prop="inventoryCount">
                            <el-radio-group v-model="formData.inventoryCount">
                                <el-radio label="0">付款减库存</el-radio>
                                <el-radio label="1">拍下减库存</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="过滤已发布的产品" prop="filterHavePublishProduct">
                            <el-switch v-model="formData.filterHavePublishProduct"></el-switch>
                            <el-button type="text" style="margin-left: 10px;">说明</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主图随机排放" prop="masterPicRandom">
                            <el-switch v-model="formData.masterPicRandom"></el-switch>
                            <el-button type="text" style="margin-left: 10px;">说明</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="详情描述">
                            <el-input v-model="formData.details" :rows="6" type="textarea"
                                placeholder="请输入商品的详情描述(可不填)"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { productPropertyTemplateList, updateOrAddProductPropertyTemp, deleteProductPropertyTempById } from "@/api/product/productInfo";

export default {
    props: {
        releaseItem: {
            type: Object,
            default: {}
        },
        releaseInfo: {
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            templateValue: '',
            templateOptions: [{
                value: '0',
                label: '平台默认模板'
            }],
            formData: {
            },
            formPdd: {},
            rules: {
                price: [{ required: true, message: '请输入', trigger: 'change' }],
                quantity: [{ required: true, message: '请输入', trigger: 'change' }],
                enterprise: [{ required: true, message: '请输入', trigger: 'change' }],
            }
        }
    },
    watch: {
        templateValue(val) {
            if (val) {
                const paramJson = JSON.parse(this.templateOptions.filter(item => item.id == val)[0].paramJson)
                const catId = this.releaseInfo.common.catId
                this.formPdd = paramJson[catId] || {}
                this.formData = paramJson.common
            } else {
                this.formData = {}
            }
        }

    },
    mounted() {
        this.productPropertyTemplateList()
    },
    methods: {
        productPropertyTemplateList() {
            productPropertyTemplateList(this.releaseInfo.common.shopId).then(res => {
                this.templateOptions = res.value
            })
        },
        handleUpdate() {
            this.$refs['formData'].validate((vaild) => {
                if (vaild) {
                    let params = {}
                    if (this.templateValue) {
                        let templateName = this.templateOptions.filter(item => item.id == this.templateValue)[0].templateName
                        let templateId = this.templateOptions.filter(item => item.id == this.templateValue)[0].id
                        const catId = this.releaseInfo.common.catId
                        params = {
                            paramJson: JSON.stringify({
                                [catId]: this.formPdd,
                                common: this.formData,
                            }),
                            templateName,
                            id: templateId
                        }
                        this.updateOrAddProductPropertyTemp(params)
                    } else {
                        this.$prompt('请输入模板名称', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(ev => {
                            params = {
                                paramJson: JSON.stringify({ common: this.formData }),
                                templateName: ev.value
                            }
                            this.updateOrAddProductPropertyTemp(params)
                        })
                    }
                }
            })
        },
        updateOrAddProductPropertyTemp(params) {
            updateOrAddProductPropertyTemp(params).then(res => {
                this.$message.success('更新操作成功')
                this.productPropertyTemplateList()
                console.log('res', res);
            })
        },
        clickDelete() {
            this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteProductPropertyTempById(this.templateValue).then(res => {
                    this.templateValue = ''
                    this.$message.success('删除模板成功')
                    this.productPropertyTemplateList()
                })
            })
        },
        handleEmitData() {
            let nextState = false
            this.$refs['formData'].validate((vaild) => {
                if (vaild) {
                    this.$emit('send', {
                        common2: this.formData
                    });
                    nextState = true
                } else {
                    nextState = false
                }
            })
            return nextState
        },
    }
}
</script>

<style lang="scss" scope></style>